<template>
  <div class="asset-account-add">
    <header class="account-add-header">
      <div @click="backClick" class="back-button">
        返回
      </div>
      <div @click="confirmClick" class="confirm-button">
        确定
      </div>
      <div class="account-add-title">
        <span>新建资产账户</span>
      </div>
    </header>
    <main class="account-add-main">
      <div class="account-item" :style="`background-color:${currentAccountColor};`"> 
        <div class="account-icon" :style="`color:${currentAccountColor};`">
          <van-icon :name="currentAccountIcon" size="6vw"/>
        </div>
        <div>
          <div class="account-name">
            {{ currentAccountName || '(账户名称)' }}
          </div>
          <div class="account-tips">
            {{ currentAccountTips || '余额' }}
          </div>
        </div>
        <div class="account-amount">
          {{ currentAmount }}
        </div>
      </div>
      <div class="edit-box">
        <van-form label-align="right">
          <van-field
            class="account-input"
            v-model="currentAccountName"
            label-width="20vw"
            label-align="center"
            label="账户名称"
            maxlength="8"
            placeholder="账户名称"
          />
          <van-field
            class="account-input"
            v-model="currentAccountTips"
            label-width="20vw"
            label-align="center"
            label="账号备注"
            maxlength="8"
            placeholder="账号备注"
          />
          <van-field
            label-width="20vw"
            label-align="center"
            label="账户图标" 
            class="account-input">
            <template #input>
              <div class="icon-map">
                <div 
                  v-for="icon in getAccountIconMap"
                  :key="icon"
                  @click="toggleIcon(icon)"
                  class="icon-map-item">
                  <div class="account-input-icon" :style="`color:${currentAccountIcon === icon ? currentAccountColor : '#000'};`">
                    <van-icon :name="icon" size="8vw"/>
                  </div>
                </div>
              </div>
            </template>
          </van-field>
          <van-field
            label-width="20vw"
            label-align="center"
            label="账户颜色" 
            class="account-input">
            <template #input>
              <div class="account-input-color" 
                :style="`background-color:${currentAccountColor};`"></div>
            </template>
          </van-field>
          <div class="color-map">
          <div 
            v-for="color in getColorMap"
            :key="color"
            @click="toggleColor(color)"
            class="color-map-item" 
            :style="`background-color:${color};`">
              <van-icon v-if="currentAccountColor === color" name="success" size="8vw"/>
            </div>
          </div>
        </van-form>
      </div>
    </main>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { UserModule, IAssetAccount } from '../../../store/modules/user';
import { accountMap } from '../../../utils/accountMap';
import { colorMap } from '../../../utils/colorMap';
import { formatNumber } from '../../../utils/formatNumber';
import { Toast } from 'vant';

@Component({
  name: 'AssetAccountAdd',
})
export default class extends Vue {
  private currentAccountIcon: string = accountMap[0].icon;
  private currentAccountColor: string = colorMap[0];
  private currentAccountName: string = '';
  private currentAccountTips: string = '';
  private currentAmount: string = formatNumber(0);

  private mounted() {
    if (!UserModule.isAddAssetAccountStatus) {
      const router = '$router';
      this[router].push({ path: 'asset' });
    }
  }

  private get getAccountMap(): IAssetAccount[] {
    return accountMap;
  }
  private get getAccountIconMap(): string[] {
    return accountMap.reduce((pre: string[], cur: IAssetAccount) => {
      return pre.indexOf(cur.icon) === -1 ? [...pre, cur.icon] : pre;
    }, []);
  }
  private get getColorMap(): string[] {
    return colorMap;
  }

  private toggleColor(color: string) {
    this.currentAccountColor = color;
  }
  private toggleIcon(icon: string) {
    this.currentAccountIcon = icon;
  }
  private backClick() {
    const router = '$router';
    this[router].push({ path: 'asset' });
    UserModule.toggleIsAddAssetAccountStatus(false);
  }
  private confirmClick() {
    if (!this.currentAccountName) {
      Toast.fail({
        message: '请输入账户名称',
        forbidClick: true,
        duration: 500,
      });
      return;
    }
    const assetAccount: IAssetAccount = {
      accountId: Math.floor(Math.random() * 100000000),
      name: this.currentAccountName,
      tips: this.currentAccountTips,
      icon: this.currentAccountIcon,
      color: this.currentAccountColor,
    };
    UserModule.addAssetAccount(assetAccount);
    const router = '$router';
    this[router].push({ path: 'asset' });
    UserModule.toggleIsAddAssetAccountStatus(false);
  }
}
</script>
<style scoped>
.asset-account-add {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
.account-add-title {
  line-height: 100px;
}
.back-button, .confirm-button {
  position: absolute;
  line-height: 100px;
  color: #409EFF;
}
.back-button {
  left: 30px;
}
.confirm-button {
  right: 30px;
}
.account-add-main {
  height: 100%;
  width: 100%;
  border-top: 1px solid #D0CECF;
  border-bottom: 1px solid #D0CECF;
  background-color: #F7F7F7;
}
.account-item {
  position: relative;
  display: flex;
  align-items: center;
  height: 100px;
  padding-left: 20px;
  border-radius: 10px;
  margin: 20px;
}
.account-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  width: 60px;
  background-color: white;
  border-radius: 50%;
}
.account-name {
  padding-left: 20px;
  color: white;
}
.account-tips {
  padding-left: 20px;
  color: rgba(255,255,255,0.7);
}
.account-amount {
  position: absolute;
  right: 20px;
  color: white;
}
.account-input {
  display: flex;
  align-items: center;
  height: 100px;
  font-size: 30px;
}
.account-input-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70px;
  width: 70px;
  background-color: white;
  border-radius: 50%;
}
.account-input-color {
  height: 50px;
  width: 50px;
  border-radius: 10px;
  margin-left: 10px;
}
.color-map {
  display: flex;
  align-items: center;
  border-top: 1px solid #EDEDF0;
  background-color: white;
  padding: 20px;
  height: 100px;
}
.color-map-item {
  float: left;
  height: 60px;
  width: 60px;
  color: white;
  border-radius: 10px;
  margin-left: 10px;
}
.icon-map {
  display: flex;
  align-items: center;
  border-top: 1px solid #EDEDF0;
  background-color: white;
  height: 100px;
}
.icon-map-item {
  float: left;
  height: 60px;
  width: 60px;
  color: white;
  border-radius: 10px;
  margin-right: 10px;
}
</style>